<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-多Tab点击切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #tab li {
            float: left;
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
        }

        #container {
            position: relative;
        }

        #content1, #content2, #content3 {
            width: 300px;
            height: 100px;
            padding: 30px;
            position: absolute;
            top: 40px;
            left: 0;
        }

        #tab1, #content1 {
            background-color: #ffcc00;
        }

        #tab2, #content2 {
            background-color: #ff00cc;
        }

        #tab3, #content3 {
            background-color: #00ccff;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>

<body>
    <h2>多Tab点击切换</h2>

    <ul id="tab">
        <li id="tab1" value="1">10元套餐</li>
        <li id="tab2" value="2">30元套餐</li>
        <li id="tab3" value="3">50元包月</li>
    </ul>

    <div id="container">
        <div id="content1">
            10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
        </div>
        <div id="content2" style="display: none">
            30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
        </div>
        <div id="content3" style="display: none">
            50元包月详情：<br />&nbsp;每月无限量随心打
        </div>
    </div>

    <script>

        /**
         * 思路1：隐藏所有的，显示当前点击的
        */
        // const $divs = $('#container > div')
        // $('#tab > li').click(function () {       // 隐式遍历，这里给 ul 下的所有 li 都添加了点击监听
        //     $divs.css({ display: 'none' })
        //     const index = $(this).index()
        //     $($divs[index]).css({ display: 'block' })
        // })

        /**
         * 思路2：隐藏当前显示的，显示当前点击的
        */
        const $divs = $('#container > div')
        let currentIndex = 0
        $('#tab > li').click(function () {
            $divs[currentIndex].style.display = 'none'
            const index = $(this).index()
            $divs[index].style.display = 'block'
            currentIndex = index
        })

    </script>
</body>

</html>